<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>溪云谱韵</title>
    <link type="text/css" rel="stylesheet" href="styles/main.css" />
</head>

<body>

    <!-- 背景遮罩，纯装饰 -->
    <div class="background-mask"></div>

    <!-- 设置按钮，点一下弹出设置 -->
    <div class="settings-btn" onclick="toggleSettings()">
        ⚙️
    </div>

    <!-- 设置弹窗，只保留ACE-Step音乐制作大模型相关内容 -->
    <div class="settings-modal" id="settingsModal">
        <div class="settings-content">
            <h2>系统设置</h2>
            <div class="settings-group">
                <div class="settings-item">
                    <label>模型：</label>
                    <select id="apiProvider" class="settings-input" disabled>
                        <option value="ACE-Step-v1-3.5B" selected>ACE-Step 音乐制作大模型</option>
                    </select>
                </div>
                <div class="settings-item" id="acestepApiItem">
                    <label for="acestepApiKey">API密钥（ACE-Step）：</label>
                    <input type="password" id="acestepApiKey" placeholder="输入ACE-Step API密钥" class="settings-input">
                </div>
            </div>
            <div class="settings-actions">
                <button onclick="saveSettings()" class="settings-btn-primary">保存设置</button>
            </div>
        </div>
    </div>

    <!-- 主标题 -->
    <h1>溪云谱韵</h1>
    <div class="intro-text">
        云生溪涧，韵起毫端 「溪云谱韵」以 ACE-Step 音乐制作大模型为弦索，在数字山水间拨响古今共振的音律诗篇。这方融合 AI 智慧与东方美学的创作场域，将诗词中的烟霞云影、竹露松风化作灵动音符 —— 输入
        “疏影横斜水清浅”，可闻古琴泛音与合成器织就的寒梅冷月；描绘 “金戈铁马，气吞万里如虎”，即得管弦齐鸣中角声催战的磅礴交响。
    </div>

    <!-- 交互区：ACE-Step音乐合成参数，采用系统设置同款样式 -->
    <div class="settings-content card" style="max-width:1200px;margin:40px auto 0;">
        <form class="settings-group" onsubmit="generateMusic();return false;">
            <div class="settings-item">
                <label for="musicPrompt">音乐描述/提示词</label>
                <textarea id="musicPrompt" class="settings-input" placeholder="请输入音乐风格描述，如：欢快的电子音乐" rows="2"></textarea>
                <div class="prompt-buttons">
                    <button type="button" class="prompt-btn"
                        onclick="document.getElementById('musicPrompt').value='Upbeat electronic music with futuristic vibe'">
                        电子风格
                    </button>
                    <button type="button" class="prompt-btn"
                        onclick="document.getElementById('musicPrompt').value='Melancholic piano piece with somber atmosphere'">
                        钢琴风格
                    </button>
                    <button type="button" class="prompt-btn"
                        onclick="document.getElementById('musicPrompt').value='Epic orchestral music with powerful momentum'">
                        交响乐
                    </button>
                    <button type="button" class="prompt-btn"
                        onclick="document.getElementById('musicPrompt').value='Light and joyful jazz music'">
                        爵士乐
                    </button>
                </div>
            </div>
            <div class="settings-item">
                <label for="musicStyle">风格</label>
                <input type="text" id="musicStyle" class="settings-input" placeholder="如：古风、流行、电子、交响等">
                <div class="prompt-buttons">
                    <button type="button" class="prompt-btn"
                        onclick="document.getElementById('musicStyle').value='Chinese traditional'">
                        古风
                    </button>
                    <button type="button" class="prompt-btn"
                        onclick="document.getElementById('musicStyle').value='Pop'">
                        流行
                    </button>
                    <button type="button" class="prompt-btn"
                        onclick="document.getElementById('musicStyle').value='Electronic'">
                        电子
                    </button>
                    <button type="button" class="prompt-btn"
                        onclick="document.getElementById('musicStyle').value='Orchestral'">
                        交响乐
                    </button>
                </div>
            </div>
            <div class="settings-item">
                <label for="musicLyrics">歌词</label>
                <textarea id="musicLyrics" class="settings-input" placeholder="请输入歌词内容（可选）" rows="4"></textarea>
                <div class="prompt-buttons">
                    <button type="button" class="prompt-btn"
                        onclick="document.getElementById('musicLyrics').value='江畔何人初见月，江月何年初照人'">
                        古典诗词
                    </button>
                    <button type="button" class="prompt-btn"
                        onclick="document.getElementById('musicLyrics').value='金戈铁马，气吞万里如虎'">
                        豪放诗词
                    </button>
                    <button type="button" class="prompt-btn"
                        onclick="document.getElementById('musicLyrics').value='春风又绿江南岸，明月何时照我还'">
                        抒情诗词
                    </button>
                    <button type="button" class="prompt-btn"
                        onclick="document.getElementById('musicLyrics').value='大漠孤烟直，长河落日圆'">
                        边塞诗词
                    </button>
                </div>
            </div>

            <div class="settings-item">
                <label for="musicTempo">速度(BPM)</label>
                <input type="number" id="musicTempo" class="settings-input" placeholder="如：60~180">
            </div>
            <div class="settings-item">
                <label for="musicDuration">时长(秒)</label>
                <input type="number" id="musicDuration" class="settings-input" placeholder="如：30">
            </div>
            <div class="settings-item">
                <label for="musicInstrument">乐器（可选）</label>
                <input type="text" id="musicInstrument" class="settings-input" placeholder="如：钢琴、古筝、合成器等">
            </div>
            <!-- 在音乐生成按钮下方添加状态提示 -->
            <div class="settings-actions" style="margin-top:18px;">
                <button id="generateMusicBtn" type="submit" class="settings-btn-primary">🎵 生成音乐</button>
                <div id="loadingIndicator" style="display:none; margin-top:10px;">
                    <div class="loading-spinner"></div>
                    <span>音乐生成中，请稍候...</span>
                </div>
            </div>

            <!-- 在audio-section添加下载按钮 -->
            <div id="audioSection" class="audio-section" style="margin-top:18px;text-align:center;">
                <audio id="musicPlayer" controls
                    style="display:none; width:90%; max-width:500px; border-radius:8px; box-shadow:0 2px 12px #0002;"></audio>
                <button id="downloadBtn" style="display:none; margin-top:10px;"
                    class="settings-btn-primary">下载音乐</button>
            </div>
        </form>
        <div id="musicResult" class="music-result" style="margin-top:18px;"></div>
        <div id="audioSection" class="audio-section" style="margin-top:18px;text-align:center;">
            <audio id="musicPlayer" controls></audio>
        </div>
    </div>
    <div class="author-footer">
        <div class="author-content">
            <h3>音乐长河·键上相逢</h3>
            <strong class="developer-name">开发者：雪豹同志</strong>
            <br>
        </div>
    </div>
</body>

<!-- 脚本都在下面引入，别漏了 -->
<script src="JavaScript/setting.js"></script>
<script src="JavaScript/stars.js"></script>
<script src="JavaScript/cards.js"></script>
<script src="JavaScript/musicRequest.js"></script>